<template>
  <div class="goods-container">
    <div class="goods-item" v-for="item in goods_info" :key="item.id">
      <div class="goods-img">
        <van-image width="80" height="80" :src="'http://www.dsl2023hcy.love:3004' + item.goods_img" />
      </div>
      <div class="goods-info">
        <div class="goods-name">
          {{ item.goods_name }}
        </div>

        <div class="goods-count-price">
          <span class="goods-price">¥{{ item.goods_price }}</span>
          <span class="goods-count">x{{ item.goods_count }}</span>
        </div>
      </div>
    </div>
    <div class="order-total-price">
      <div class="createTime" v-if="createTime !== ''">{{ createTime }}</div>
      <div class="count-price">
        <span class="order-count">共计 {{ goodsCount }} 件商品</span>
        <span class="order-price">订单金额：¥{{ goodsTotalPrice }}</span>
      </div>
      <span class="left-circle circle"></span>
      <span class="right-circle circle"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'goods-item',
  props: {
    goods_info: {
      type: Array,
      require: true
    }
  },
  methods: {
    dealTime(createTime) {
      const date = new Date(createTime)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month >= 10 ? month : '0' + month
      let day = date.getDate()
      day = day >= 10 ? day : '0' + day
      let hour = date.getHours()
      hour = hour >= 10 ? hour : '0' + hour
      let minute = date.getMinutes()
      minute = minute >= 10 ? minute : '0' + minute
      let second = date.getSeconds()
      second = second >= 10 ? second : '0' + second
      createTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      return createTime
    }
  },
  computed: {
    createTime() {
      let createTime = ''
      this.goods_info.some((item) => {
        if (item.create_time) {
          createTime = item.create_time
          return true
        }
      })
      if (createTime) {
        return this.dealTime(createTime)
      }
    },
    goodsCount() {
      return this.goods_info.reduce((count, item) => {
        count += item.goods_count
        return count
      }, 0)
    },
    goodsTotalPrice() {
      return this.goods_info
        .reduce((price, item) => {
          price += item.goods_count * parseFloat(item.goods_price)
          return price
        }, 0)
        .toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
.goods-container {
  .goods-item {
    display: flex;
    padding: 10px;

    .goods-img {
      margin-right: 10px;
      flex-shrink: 0;
    }

    .goods-info {
      flex: 1;

      .goods-name {
        font-size: 14px;
        line-height: 20px;
        color: #444;
        overflow: hidden;
        text-overflow: ellipsis; /*显示为......*/
        -webkit-line-clamp: 2; /*显示为两行，在第二行中显示为.......*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }

      .goods-count-price {
        display: flex;
        height: 40px;
        margin-top: 3px;
        font-size: 14px;
        line-height: 16px;
        align-items: center;
        justify-content: space-between;

        .goods-price {
          font-weight: bold;
          color: #e4393c;
        }

        .goods-count {
          color: #444;
          font-size: 12px;
        }
      }
    }
  }

  .order-total-price {
    position: relative;
    border-top: 1px dashed #e8e8e8;
    padding: 25px 10px 15px;

    .createTime {
      color: #444;
      font-size: 14px;
      line-height: 16px;
      margin-bottom: 10px;
    }

    .count-price {
      display: flex;
      font-size: 14px;
      line-height: 19px;
      justify-content: space-between;
      .order-count {
        color: #666;
      }

      .order-price {
        color: #e4393c;
        font-weight: bold;
      }
    }

    .circle {
      width: 20px;
      height: 20px;
      position: absolute;
      border-radius: 999px;
      background-color: #f5f5f5;
      top: -10px;
    }
    .left-circle {
      left: -10px;
    }
    .right-circle {
      right: -10px;
    }
  }
}
</style>
